<template>
  <div class="anli">
    <Top></Top>
    <div class="banner">
      <img src="../assets/aban.png" />
    </div>
    <div class="ash">
      <div class="header1" v-for="ash in ashs" :key="ash.id">
        <p @click="qie(ash.idg)" :class="idg==ash.idg?'borbt':''">{{ash.hed}}</p>
      </div>
    </div>


    <div class="cont">
<!-- 这是第一个2个页面 -->
      <div class="cont_img" v-for="con in tent" :key="con.id" v-show="idg!==con.idg">
        <div class="aimg1" v-show="dy==con.dy">
          <img :src="con.img" />
          <img :src="con.img" />
          <img :src="con.img" />
          <img :src="con.img" />
          <img :src="con.img" />
          <img :src="con.img" />
        </div>
        <div class="aimg2" v-show="dy==con.dy">
          <img :src="con.img2" />
          <img :src="con.img2" />
          <img :src="con.img2" />
        </div>
      </div>
<!-- 这是二个2个页面 -->
      <div class="cont_img" v-for="con in tent" :key="con.id" v-show="idg==con.idg">
        <div class="aimg1" v-show="dy==con.dy">
          <img :src="con.img22" />
          <img :src="con.img22" />
          <img :src="con.img22" />
          <img :src="con.img22" />
          <img :src="con.img22" />
          <img :src="con.img22" />
        </div>
        <div class="aimg2" v-show="dy==con.dy">
          <img :src="con.img2s" />
          <img :src="con.img2s" />
          <img :src="con.img2s" />
        </div>
      </div>

      <div class="in12">
        <p class="index12" v-for="u in ins" :key="u.id" :class="dy==u.dy?'redsa':'blk'">
          <span @click="din(u.dy)">{{u.ins1}}</span>
        </p>
      </div>

    </div>
    <Bott></Bott>
  </div>
</template>

<script>
import Top from "../components/top.vue";
import Bott from "../components/bott.vue";
export default {
  components: { Top, Bott },
  data() {
    return {
      ins: 1,
      idg: 1,
      dy: 1,
      ashs: [
        {
          idg: 1,
          hed: "APP/小程序开发"
        },
        {
          hed: "网站开发"
        }
      ],
      tent: [
        {
          dy: 1,
          img: require("../assets/anli1.png"),
          img22:require("../assets/anll2.png")
        },
        {
          dy: 2,
          img2: require("../assets/anll2.png"),
          img2s:require("../assets/al4.png")
        }
      ],
      ins: [
        {
          dy: 1,
          ins1: "1"
        },
        {
          dy: 2,
          ins1: "2"
        }
      ]
    };
  },
  methods: {
    qie(idg) {
      this.idg = idg;
    },
    din(dy) {
      this.dy = dy;
      // console.log(dy)
    }
  }
};
</script>

<style>
</style>